<%@page import="org.springframework.ui.ModelMap"%>
<%@page import="mx.com.switz.autopista.dto.Vehiculo"%>
<%@page import="java.util.List"%>
<%@page import="org.springframework.web.servlet.ModelAndView"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html lang="en">
<%
	HttpSession session = request.getSession(true);
	String user = (String) session.getAttribute("user");
%>
<!--begin head-->
<head>
<meta charset="UTF-8">
<title>Autopista</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- set content to full screen on iphones -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="">
<meta name="author" content="">

<!--[if lte IE 6]>
<link rel="stylesheet" href="//universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
<![endif]-->

<!--[if !lte IE 6]><!-->
<!-- Load Google Web Font -->
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans%3A400%2C700'
	rel='stylesheet' type='text/css'>
<!-- Load style.css: contains all css files concatenated to one single file -->
<link href="../resources/css/style.css" rel="stylesheet">
<!--<![endif]-->

<!-- Load HTMLShiv for IE9 HTML5 support -->
<!--[if lt IE 9]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Your Favoriate Icons -->
<link rel="shortcut icon" href="resources/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="../resources/ico/apple-touch-icon-144-precomposed.png">
<link rel="../resources/apple-touch-icon-precomposed" sizes="114x114"
	href="../resources/ico/apple-touch-icon-114-precomposed.png">
<link rel="../resources/apple-touch-icon-precomposed" sizes="72x72"
	href="../resources/ico/apple-touch-icon-72-precomposed.png">
<link rel="../resources/apple-touch-icon-precomposed"
	href="../resources//ico/apple-touch-icon-57-precomposed.png">

<!--Estilo para Boton, tipo hipervinculo -->
<link href="../resources/css/utileria.css" rel="stylesheet">

<!--
NOTE: All the javascripts have been moved to the bottom of the page to load the content faster.
-->

</head>
<!--end head-->

<!--begin body-->
<body>
	<header>
		<!--logo area start-->
		<div class="logo-area">
			<span id="logo"></span>
		</div>
		<!--end logo area-->

		<!--nav bar start-->
		<nav class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<!--mobile nav icon (hidden:CSS)-->
					<a class="btn btn-navbar" data-toggle="collapse"
						data-target=".nav-collapse"> menu </a>
					<!--end btn-navbar-->
					<div class="nav-collapse">
						<ul class="nav">
							<li><a href="/Autopista/">Inicio</a></li>
							<li class="active"><a href="/Autopista/buscar">Buscar
									vehiculos</a></li>
							<li><a href="/Autopista/buscar">Ofertas</a></li>
							<li><a href="/Autopista/contacto">Contacto</a></li>
							<li><a href="/Autopista/login">Login</a></li>
							<%
								if (user != null) {
							%>
							<li><a href=""><%=user%> </a> <a
								href="<c:url value="/j_spring_security_logout" />"> Logoff</a></li>
							<%
								}
							%>
						</ul>

					</div>
					<!-- end nav-collapse -->
				</div>
				<!-- end container-->
			</div>
			<!-- end navbar-inner -->
		</nav>
		<!--end nav bar-->

	</header>

	<section id="main">

		<div class="body-text">
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span9 listing-js">

						<!-- page heading -->
						<h1>Resultados de la busqueda</h1>
						<div class="container-fluid">
							<div class="row-fluid">
								<div class="span7 dropdown-results">
									<%
										int rangoFinal = Integer.parseInt(request.getAttribute("ultimo")
												.toString());
										rangoFinal += 1;

										int rangoInicial = Integer.parseInt(request.getAttribute("inicio")
												.toString());
										rangoInicial += 1;

										int totalLista = Integer.parseInt(request.getAttribute("size")
												.toString());

										out.println("<p>" + rangoInicial + " - " + rangoFinal + " de "
												+ totalLista + " resultados</p>");
									%>

								</div>
								<div class="span5">
									<select id="sort" name="sort">
										<option value="pmrank">Ordenar por precio</option>
										<option value="price">Ordenar por Kilometraje</option>
										<option value="-price">Ordenar por año</option>
									</select>
								</div>
							</div>
						</div>
						<!-- end page heading -->
						<%
							int ultimo = Integer.parseInt(request.getAttribute("ultimo")
									.toString());
						%>

						<!-- create listing -->
						<div class="container-fluid vehicle-listing" id="renting-map-js">
							<c:forEach items="${autos}" var="datos" begin="${inicio}" end="<%=ultimo%>">
								<form action="vehiculoID" method="post">
								<!--start list-->
								<div class="span6">
									<div class="span5">
										<a href="detalle.html"><img src="../resources/Carros Cuernavaca/<c:out value="${datos.foto}"/>" alt="Placeholder" class="thumbnail">
										</a>
									</div>

									<div class="span7">
										<p style="font-size: 15px;">
											<c:out value="${datos.titulo}" />
										</p>
										<p class="size">
											Marca:
											<c:out value="${datos.marca}" />
										</p>
										<p class="price">
											Precio: $
											<c:out value="${datos.precio}" />
										</p>

										<!-- Google Map info (These values will be hidden to the user)-->
										<p class="street">Place Street Intersection here</p>
										<p class="lat">43.793997</p>
										<p class="lng">-79.411926</p>
										<!-- end google map info -->
										<!-- Short List Btns -->
										<ul class="list-btns">
											<li><a href="javascript:void(0);" id="appartment_1"
												class="add-to-list-js"
												data-shortlist="<img src='http://placehold.it/148x129/E37F14/FFFFFF' alt='Placeholder Image'>
											<div><a href='detalle.html' id='appartment_1'><c:out value="${datos.titulo}"/></a><c:out value="${datos.precio}"/></div>">
													<i class="icon-plus-sign"></i>Favorito
											</a></li>
											<li><input type="submit" id="submitbutton" onclick="envia()" value="Ver Detalle"></li>
										</ul>
										<!-- end short list -->
									</div>
								</div>
								<input type="hidden" value="<c:out value="${datos.idVehiculo}"/>" name="id" id="id"/>
							</form>
							</c:forEach>
							<!--end list-->
						</div>
						<!-- end map plot-->



						<!--begin paging-->
						<div class="container-fluid">
							<div class="row-fluid" style="border: none;">
								<div class="span12">
									<div class="pagination pagination-centered">
										<ul>
											<li><a href="#">Previo</a></li>
											<%
											
												int total = Integer.parseInt(request.getAttribute("division").toString());
												int incrementa = 1;
												int begin = 0;
												int end = 9;

												for (int i = 0; i < total; i++) {
													out.println("<li><a href='http://localhost:8080/Autopista/vehiculo/buscar?begin="+begin+"&end="+end+"'>"+ incrementa+ "</a><li>");
													incrementa++;
													begin += 10;
													end += 10;
												}
											%>
											<li><a href="#">Siguiente</a></li>



										</ul>
									</div>
								</div>
							</div>
						</div>
						<!-- end paging -->

					</div>
					<div class="span3">
						<!--
"Quick Search" Widget

SPECIAL NOTE: Please leave the inline style for <Select></Select> "width:100%",
the width is automatically "Re-adjusted" with javascript
See "config.js" for more details
-->
						<div class="qbox">
							<h3>
								<i class="icon-search pull-right"></i>Busqueda
							</h3>


							<form action="searchVehiculo">
								<input type="hidden" name="begin" value="0"> <input
									type="hidden" name="end" value="9">
								<div>
									<label>Estado</label> <select id="estado" name="estado"
										data-placeholder="Selecciona el estado" class="chzn-select"
										style="width: 100%;" tabindex="0">
										<option name="0" selected="selected" value=0></option>
									</select>
								</div>
								<div>
									<label>Municipio</label> <select id="municipio"
										name="municipio" data-placeholder="Selecciona el municipio"
										multiple="multiple" class="chzn-select" style="width: 100%;"
										tabindex="0">
										<option name="0" selected="selected" value=0></option>
									</select>
								</div>
								<div>
									<label>Tipo</label> <select id="tipo" name="tipo"
										data-placeholder="--Todos--" class="chzn-select"
										style="width: 100%;" tabindex="0">
										<option name="0" selected="selected" value=0></option>
									</select>
								</div>
								<div>
									<label>Marca</label> <select id="marca" name="marca"
										data-placeholder="--Todas--" class="chzn-select"
										style="width: 100%;" tabindex="0">
										<option name="0" selected="selected" value=0></option>
									</select>
								</div>
								<div>
									<label>Modelo</label> <select id="modelo" name="modelo"
										data-placeholder="--Todos--" class="chzn-select"
										style="width: 100%;" tabindex="0">
										<option name="0" value=0></option>

									</select>
								</div>
								<div>
									<label>Combustible</label> <select id="combustible"
										name="combustible" data-placeholder="--Todos--"
										class="chzn-select" style="width: 100%;" tabindex="0">
										<option name="0" selected="selected" value=0></option>
									</select>
								</div>
								<div>
									<label>Transmision</label> <select id="transmision"
										name="transmision" data-placeholder="--Todos--"
										class="chzn-select" style="width: 100%;" tabindex="0">
										<option name="0" selected="selected" value=0></option>
									</select>
								</div>
								<div>
									<p>
										<input type="text" id="years" class="disabled">
									</p>

									<div id="ui-slider-years"
										class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
										<div class="ui-slider-range ui-widget-header"></div>
										<a class="ui-slider-handle ui-state-default ui-corner-all"
											href="javascript:void(0)"></a> <a
											class="ui-slider-handle ui-state-default ui-corner-all"
											href="javascript:void(0)"></a>
									</div>
									<input type="hidden" id="yearMin" name="yearMin"> <input
										type="hidden" id="yearMax" name="yearMax">
								</div>
								<div>
									<p>
										<input type="text" id="uiKm" readonly class="disabled">
									</p>

									<div id="ui-slider-km"
										class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
										<div class="ui-slider-range ui-widget-header"></div>
										<a class="ui-slider-handle ui-state-default ui-corner-all"
											href="javascript:void(0)"></a> <a
											class="ui-slider-handle ui-state-default ui-corner-all"
											href="javascript:void(0)"></a>
									</div>
									<input type="hidden" id="uiKmMin" name="uiKmMin"> <input
										type="hidden" id="uiKmMax" name="uiKmMax">
								</div>
								<div>
									<p>
										<input type="text" id="amount" readonly class="disabled"
											style="margin-top: 10px;">
									</p>

									<input type="hidden" id="inputanio_min"> <input
										type="hidden" id="inputanio_max">
									<div id="ui-slider-price"
										class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
										<div class="ui-slider-range ui-widget-header"></div>
										<a class="ui-slider-handle ui-state-default ui-corner-all"
											href="javascript:void(0)"></a> <a
											class="ui-slider-handle ui-state-default ui-corner-all"
											href="javascript:void(0)"></a>
									</div>
									<input type="hidden" id="amountMin" name="amountMin"> <input
										type="hidden" id="amountMax" name="amountMax">
								</div>
								<button id="btnBuscar" class="btn btn-inverse btn-small"
									type="submit">Buscar</button>
							</form>
							
							
						</div>
						<!-- // MY SHORT LIST // -->
						<div class="qbox">
							<h3>
								Favoritos <label class="badge badge-important pull-right"
									id="short-list-count-js">5</label>
							</h3>
							<div>
								<!-- dummy short list items -->
								<ol class="shortlist">
									<li></li>

								</ol>
								<!-- end dummy short list items -->
								<ol id="show-items" class="shortlist">

								</ol>
								<a href="javascript:void(0);" class="link" id="clear-all">Borrar
									lista</a>
							</div>
						</div>
						<!--/end my short list-->
					</div>
				</div>

			</div>

		</div>

		<!-- /container -->
	</section>
	<footer>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12 contact-info">
					<span class="span9"> AutoPista - Todos los derechos
						reservados â¢ <a href="mailto:info@switz.mx"> info@switz.mx</a>
					</span>

					<ul class="span3 social-network">
						<li><a href="javascript:void(0)"><i
								class="icon-linkedin-sign"></i></a></li>
						<li><a href="javascript:void(0)"><i
								class="icon-pinterest-sign"></i></a></li>
						<li><a href="javascript:void(0)"><i
								class="icon-twitter-sign"></i></a></li>
						<li><a href="javascript:void(0)"><i
								class="icon-facebook-sign"></i></a></li>
						<li><a href="javascript:void(0)"><i
								class="icon-google-plus-sign"></i></a></li>
					</ul>

				</div>
				<div class="clearfix"></div>
			</div>
			<!-- end .row-fluid -->
		</div>
		<!-- end .container-fluid -->
	</footer>
	<!-- end footer -->

	<!--[if !lte IE 6]><!-->
	<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script>
		window.jQuery
				|| document
						.write('<script src="resources/js/libs/jquery.min.js"><\/script>')
	</script>
	<script
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script>
		window.jQuery.ui
				|| document
						.write('<script src="resources/js/libs/jquery.ui.min.js"><\/script>')
	</script>

	<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
	<!--[if lt IE 9]>
<script src="resources/js/include/selectivizr.min.js"></script>
<![endif]-->


	<script src="resources/js/libs/jquery.ui.touch-punch.min.js"></script>
	<!-- REQUIRED: A small hack that enables the use of touch events on mobile -->

	<!-- Add 'http:' for testing locally -->
	<script src="http://maps.google.com/maps/api/js?sensor=true"
		type="text/javascript"></script>

	<script src="resources/js/menu/jquery.ct.3LevelAccordion.min.js"></script>
	<!-- REQUIRED: Accordion Menu with filter-->
	<script
		src="resources/js/slider/jquery.responsivethumbnailgallery.min.js"></script>
	<!-- REQUIRED: Responsive Gallery Plugin -->
	<script src="resources/js/slider/jquery.onebyone.min.js"></script>
	<!-- REQUIRED: Slider Plugin -->
	<script src="resources/js/slider/jquery.touchwipe.min.js"></script>
	<!-- REQUIRED: Plugin to make Slider Plugin work on Touch Devices -->
	<script src="resources/js/slider/jquery.onebyone.min.js"></script>
	<!-- REQUIRED: Slider Plugin -->
	<script src="resources/js/slider/jquery.touchwipe.min.js"></script>
	<!-- REQUIRED: Plugin to make Slider Plugin work on Touch Devices -->

	<script src="resources/js/include/jquery.fitvids.min.js"></script>
	<!-- RECOMMENDED: Responsive videos -->
	<script src="resources/js/include/jquery.tweet.min.js"></script>
	<!-- OPTIONAL: Twitter display plugin -->
	<script src="resources/js/include/jquery.equal-heights.min.js"></script>
	<!-- RECOMMENDED: Plugin to keep div heights consistant -->
	<script src="resources/js/include/jquery.todo.min.js"></script>
	<!-- REQUIRED: Plugin to save "add to short list" items -->
	<script src="resources/js/include/jquery.pubsub.min.js"></script>
	<!-- REQUIRED: (If todo.js is in use) Dependent with todo.js -->
	<script src="resources/js/include/jquery.select2.min.js"></script>
	<!-- RECOMMENDED: Custom jQuery/searchable dropdowns -->
	<script src="resources/js/include/bootstrap.min.js"></script>
	<!-- REQUIRED: For BootStrap build -->

	<script src="resources/js/config.js"></script>
	<!-- DO NOT REMOVE: Contains major plugin initiations and functions -->
	<!--<![endif]-->

</body>
</html>